<template>
  <div id="logout">
    <div class="title-wrapper"><div class="pro">产品详情</div></div>

    <div class="content">
      <div class="kind">
        <div class="item" v-for="item in items" :style="{background:'url('+item.background+') no-repeat 100px 80px',backgroundSize:'100px',boxShadow:'0 0 5px #acabab',borderRadius:'10px'}">
          <h3>{{item.title}}</h3>
          <div class="description">{{item.message}}</div>
        </div>
      </div>
      <div class="box">
        <div style="color: red;font-size: 30px">${{item.price}}</div>
        <el-button type="primary"
                   @click="purchase"
                   style="width: 180px;margin-top: 20px;height: 50px">购买</el-button>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: "CompanyLogout",
    data() {
      return {
        items: [
          {
            title: '公司普通注销',
            message: '歇业前把公司注销手续完成',
            background: require('../../../assets/images/注销1.png')
          },
          {
            title: '公司破产注销',
            message: '司法依法宣告破产经营不下去',
            background: require('../../../assets/images/注销2.png')
          }, {
            title: '公司普通注销',
            message: '歇业前把公司注销手续完成',
            background: require('../../../assets/images/注销3.png')
          }, {
            title: '公司期限届注销',
            message: '公司章程规定营业期限届满或者其他解散事由出现',
            background: require('../../../assets/images/注销4.png')
          }, {
            title: '公司架构调整注销',
            message: '公司因合并或者分立解散',
            background: require('../../../assets/images/注销5.png')
          }, {
            title: '税务黑名单',
            message: '长期零申报企业，执照被吊销',
            background: require('../../../assets/images/注销6.png')
          }, {
            title: '强制解散',
            message: '公司被依法强制解散只能走注销程序',
            background: require('../../../assets/images/注销7.png')
          }, {
            title: '营业执照被吊销',
            message: '歇业前把公司注销手续完成',
            background: require('../../../assets/images/注销8.png')
          },
        ],
        item: {
          name: '企业注销',
          price: 699,
        },
        form: {}
      }
    },
    methods: {
        purchase()
        {
          if (sessionStorage.getItem('isLogin') === '0') {
            this.$router.push('/login')
          } else if (sessionStorage.getItem('userType') == 'server') {
            alert('您当前登录身份为服务方，无法下单。如需下单请退出系统使用采买方身份登录！')
          } else {
            this.form.ber_id = this.$store.getters.getInfo.ber_id
            this.form.or_kind = 1
            this.form.or_product = this.item.name
            this.form.or_money = this.item.price
            this.form.ser_id = ''
            this.form.or_pay = 0
            this.form.or_url = ''

            this.$router.push({
              name: 'Pay',
              params: {
                form: this.form
              }
            })
          }
        }
    }
  }
</script>

<style scoped>
  .content{
    background-color: #fff;
    display: flex;
    padding: 20px;
    justify-content: flex-start;
  }
  .pro{
    background-color: #ffffff;
    width: 200px;
    height: 40px;
    border-top: 4px solid #0d6eb8;
    color: #0d6eb8;
    font-size: 18px;
    line-height: 40px;
  }

  .kind{
    display: flex;
    flex-wrap: wrap;
  }
  .kind .item{
    text-align: left;
    padding: 10px;
    margin: 5px;
    border: 1px solid #f1eeee;
    width: 200px;
    height: 200px;
    /*background-image: url("../../../assets/images/注销1.png");*/
  }
  .item .description{
    font-size: 12px;
    width: 120px;
    color: #666;
  }

  .box{
    width: 500px;
    height: 200px;
    padding-top: 100px;
    border: 1px solid #d9d5d5;
    /*border-radius: 20px;*/
    box-shadow: 0 0 5px #acabab;
    /*background-color: #f8fafc;*/
    background: url("../../../assets/images/企业注销.png");
    background-size: 500px 300px;
    margin: 30px 50px;
  }
</style>